<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- <p>刷新次数: {{ count }}</p> -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <p>正在热映页面</p> -->
        <div
          v-for="item in films"
          :key="item.index"
          @click="goDetail(item.filmId)"
        >
          <!-- 调用封装的card组件 遍历出数据 -->
          <Card
            :img="item.poster"
            :name="item.name"
            :type="item.filmType.name"
            :actors="item.actors | parseActors"
            :grade="item.grade"
            :nation="item.nation"
            :runtime="item.runtime"
          />
        </div>
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <!-- console.log('this.pageNum') -->
      </van-list>
      <div style="height: 100px"></div>
    </van-pull-refresh>
  </div>
</template>

<script>
import url from "@/config/url";
import Vue from "vue";
import { Tag, List, PullRefresh } from "vant";
import Card from "@/components/Card.vue";
Vue.use(List);
Vue.use(Tag);
Vue.use(PullRefresh);
export default {
  components: { Card },
  data() {
    return {
      // data: "这是数据",
      films: [],
      // 加载状态
      loading: false,
      // 结束状态
      finished: false,
      // 当前页数 接口没有返回 当前页码，本地存一个
      pageNum: 1,
      // 总条数
      total: 0,
      // 下拉转态
      refreshing: false,
    };
  },
  methods: {
    onRefresh() {
      console.log("下拉触发了");
      this.pageNum = 1;
      this.onLoad();
    },
    onLoad() {
      // 计算页数和总数 是否还有后续的翻页 如果没有就关闭加载转态，将完成状态设置为true
      if (this.pageNum > 1 && this.pageNum > Math.ceil(this.total / 10)) {
        this.loading = true;
        this.finished = true;
        return;
      }
      // 默认此接口地址访问需要跨域，使用proxy代理方式
      // const url = '/api/getNowPlayingFilmList';
      let cityId = localStorage.getItem("cityId")
        ? localStorage.getItem("cityId")
        : 110100;
      this.$http
        .get(url.nowPlaying + "?pageNum=" + this.pageNum + "&cityId=" + cityId)
        .then((res) => {
          console.log(res.data.films);
          console.log(" onload事件触发");
          this.films = res.data.films;
          // 新旧数据合并 先旧的后新的
          this.films = [...this.films, ...res.data.films];
          //请求完毕之后将页数加1
          this.pageNum = this.pageNum + 1;
          this.total = res.data.total;
          // 在每次请求完毕后，需要手动将loading设置为false，表示加载结束
          this.loading = false;
          // 下拉之后请求完成，将状态修改为false
          this.refreshing = false;
        });
    },
    // 跳转到电影详情
    goDetail(id) {
      this.$router.push("/film/" + id);
    },
  },
  created() {},
  filters: {
    parseActors(arr) {
      if (arr) {
        let tmp = "";
        arr.forEach((item) => {
          tmp += item.name + " ";
        });
        return tmp;
      } else {
        return "暂无";
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
